<script setup lang="ts">

import {ref} from "vue";
import {postJobResumeService} from "@/api/job.js";

const Resume = ref({
  name: '张三',
  age: '28岁',
  degree: '硕士',
  school: '清华大学',
  specialized: '计算机科学与技术',
  intention: '前端开发',
  skills: 'Vue.js, React, Node.js, JavaScript, TypeScript',
  projects: '个人博客网站, 企业级管理后台, 跨平台移动应用',
  phone: '13800138000'
});

</script>

<template>
  <!-- Start Preloader Area -->
  <div class="preloader">
    <div class="lds-ripple">
      <div></div>
      <div></div>
    </div>
  </div>
  <!-- End Preloader Area -->

  <!-- Start Header Area -->
  <header class="header-area">
    <!-- Start Top Header -->
    <div class="top-header">
      <div class="container">
        <div class="row align-items-center">
          <div class="col-lg-6 col-md-6">
            <ul class="header-left-content">
              <li>
                <span>Hot Line</span>
                <a href="tel:+1-(514)-312-5678">+1 (514) 312-5678</a>
              </li>
            </ul>
          </div>

          <div class="col-lg-6 col-md-6">
            <div class="header-right-content">
              <ul class="language">
                <li>
                  <div class="dropdown language-btn">
                    <button class="dropdown-toggle" type="button" data-toggle="dropdown">
												<span>
													Language
													<i class="bx bx-chevron-down"></i>
												</span>
                    </button>

                    <div class="dropdown-menu">
                      <a href="#" class="dropdown-item">
                        <img src="@/assets/images/language/english.png" alt="Flag">
                        <span>English</span>
                      </a>

                      <a href="#" class="dropdown-item">
                        <img src="@/assets/images/language/arab.png" alt="Flag">
                        <span>العربيّة</span>
                      </a>

                      <a href="#" class="dropdown-item">
                        <img src="@/assets/images/language/germany.png" alt="Flag">
                        <span>Germany</span>
                      </a>

                      <a href="#" class="dropdown-item">
                        <img src="@/assets/images/language/portugues.png" alt="Flag">
                        <span>Português</span>
                      </a>

                      <a href="#" class="dropdown-item">
                        <img src="@/assets/images/language/china.png" alt="Flag">
                        <span>简体中文</span>
                      </a>
                    </div>
                  </div>
                </li>
              </ul>

              <ul class="log-in">
                <li>
                  <a href="log-in-register.html">
                    <i class="bx bxs-lock"></i>
                    Log In
                  </a>
                </li>

                <li>
                  <a href="log-in-register.html">
                    <i class="bx bxs-user"></i>
                    Register
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- Start Top Header -->

    <!-- Start Navbar Area -->
    <div class="navbar-area">
      <div class="mobile-nav">
        <div class="container">
          <div class="mobile-menu">
            <div class="logo">
              <a href="index.html">
                <img src="@/assets/images/logo.png" alt="logo">
              </a>
            </div>
          </div>
        </div>
      </div>

      <div class="desktop-nav">
        <div class="container">
          <nav class="navbar navbar-expand-md navbar-light">
            <a class="navbar-brand" href="index.html">
              <img src="@/assets/images/logo.png" alt="logo">
            </a>

            <div class="collapse navbar-collapse mean-menu">
              <ul class="navbar-nav m-auto">
                <li class="nav-item">
                  <a href="#" class="nav-link">
                    Home
                    <i class="bx bx-chevron-down"></i>
                  </a>

                  <ul class="dropdown-menu">
                    <li class="nav-item">
                      <a href="index.html" class="nav-link">Home One</a>
                    </li>
                    <li class="nav-item">
                      <a href="index-2.html" class="nav-link">Home Two</a>
                    </li>
                    <li class="nav-item">
                      <a href="index-3.html" class="nav-link">Home Three</a>
                    </li>
                  </ul>
                </li>

                <li class="nav-item">
                  <a href="#" class="nav-link active">
                    Jobs
                    <i class="bx bx-chevron-down"></i>
                  </a>

                  <ul class="dropdown-menu">
                    <li class="nav-item">
                      <a href="job-listing.html" class="nav-link">Job Listing</a>
                    </li>
                    <li class="nav-item">
                      <a href="post-job.html" class="nav-link active">写简历</a>
                    </li>
                    <li class="nav-item">
                      <a href="job-details.html" class="nav-link">Job Details</a>
                    </li>
                  </ul>
                </li>

                <li class="nav-item">
                  <a href="#" class="nav-link">
                    Candidates
                    <i class="bx bx-chevron-down"></i>
                  </a>

                  <ul class="dropdown-menu">
                    <li class="nav-item">
                      <a href="candidates-listing.html" class="nav-link">Candidates Listing</a>
                    </li>
                    <li class="nav-item">
                      <a href="candidates-details.html" class="nav-link">Candidates Details</a>
                    </li>

                    <li class="nav-item">
                      <a href="#" class="nav-link">
                        Candidate Dashboard
                        <i class="bx bx-chevron-down"></i>
                      </a>

                      <ul class="dropdown-menu">
                        <li class="nav-item">
                          <a href="dashboard.html" class="nav-link">Dashboard</a>
                        </li>
                        <li class="nav-item">
                          <a href="profile.html" class="nav-link">Profile</a>
                        </li>
                        <li class="nav-item">
                          <a href="resume.html" class="nav-link">Resume</a>
                        </li>
                        <li class="nav-item">
                          <a href="bookmarks.html" class="nav-link">Bookmarks</a>
                        </li>
                        <li class="nav-item">
                          <a href="applied-jobs.html" class="nav-link">Applied Jobs</a>
                        </li>
                        <li class="nav-item">
                          <a href="alert-jobs.html" class="nav-link">Alert Jobs</a>
                        </li>
                        <li class="nav-item">
                          <a href="message.html" class="nav-link">Message</a>
                        </li>
                        <li class="nav-item">
                          <a href="change-password.html" class="nav-link">Change Password</a>
                        </li>
                      </ul>
                    </li>
                  </ul>
                </li>

                <li class="nav-item">
                  <a href="#" class="nav-link">
                    Employers
                    <i class="bx bx-chevron-down"></i>
                  </a>

                  <ul class="dropdown-menu">
                    <li class="nav-item">
                      <a href="employers-listing.html" class="nav-link">Employers Listing</a>
                    </li>
                    <li class="nav-item">
                      <a href="employers-details.html" class="nav-link">Employers Details</a>
                    </li>
                  </ul>
                </li>

                <li class="nav-item">
                  <a href="#" class="nav-link">
                    Pages
                    <i class="bx bx-chevron-down"></i>
                  </a>

                  <ul class="dropdown-menu">
                    <li class="nav-item">
                      <a href="about-us.html" class="nav-link">About Us</a>
                    </li>
                    <li class="nav-item">
                      <a href="pricing.html" class="nav-link">Pricing</a>
                    </li>
                    <li class="nav-item">
                      <a href="faq.html" class="nav-link">FAQ</a>
                    </li>

                    <li class="nav-item">
                      <a href="#" class="nav-link">
                        Blog
                        <i class="bx bx-chevron-down"></i>
                      </a>

                      <ul class="dropdown-menu">
                        <li class="nav-item">
                          <a href="blog.html" class="nav-link">Blog</a>
                        </li>
                        <li class="nav-item">
                          <a href="blog-details.html" class="nav-link">Blog Details</a>
                        </li>
                      </ul>
                    </li>

                    <li class="nav-item">
                      <a href="contact-us.html" class="nav-link">Contact Us</a>
                    </li>
                    <li class="nav-item">
                      <a href="terms-conditions.html" class="nav-link">Terms & Conditions</a>
                    </li>
                    <li class="nav-item">
                      <a href="privacy-policy.html" class="nav-link">Privacy Policy</a>
                    </li>
                    <li class="nav-item">
                      <a href="log-in-register.html" class="nav-link">Log In / Register</a>
                    </li>
                    <li class="nav-item">
                      <a href="freelancer.html" class="nav-link">Freelancer</a>
                    </li>
                    <li class="nav-item">
                      <a href="testimonials.html" class="nav-link">Testimonials</a>
                    </li>
                    <li class="nav-item">
                      <a href="coming-soon.html" class="nav-link">Coming Soon</a>
                    </li>
                    <li class="nav-item">
                      <a href="404.html" class="nav-link">404 Error Page</a>
                    </li>
                  </ul>
                </li>
              </ul>

              <div class="others-option">
                <div class="get-quote">
                  <a href="post-job.html" class="default-btn">
                    Post a Job
                  </a>
                </div>
              </div>
            </div>
          </nav>
        </div>
      </div>

      <div class="others-option-for-responsive">
        <div class="container">
          <div class="dot-menu">
            <div class="inner">
              <div class="circle circle-one"></div>
              <div class="circle circle-two"></div>
              <div class="circle circle-three"></div>
            </div>
          </div>

          <div class="container">
            <div class="option-inner">
              <div class="others-option justify-content-center d-flex align-items-center">
                <div class="get-quote">
                  <a href="post-job.html" class="default-btn">
                    Post a Job
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- End Navbar Area -->
  </header>
  <!-- End Header Area -->

  <!-- Start Page Title Area -->
  <div class="page-title-area">
    <div class="container">
      <div class="page-title-content">
        <h2>Post a Job</h2>
        <ul>
          <li>
            <a href="index.html">
              Home
            </a>
          </li>
          <li class="active">Post a Job</li>
        </ul>
      </div>
    </div>
  </div>
  <!-- End Page Title Area -->

  <!-- Start Candidates Job Information Area -->
  <section class="job-information-area ptb-100">
    <div class="container">
      <div class="job-information">
        <el-card shadow="hover">
          <div slot="header">
            <h3>工作简历</h3>
          </div>
          <div v-if="Resume" class="info-grid">
            <el-descriptions title="" :column="1">
              <el-descriptions-item label="姓名：">{{ Resume.name }}</el-descriptions-item>
              <el-descriptions-item label="年龄：">{{ Resume.age }}</el-descriptions-item>
              <el-descriptions-item label="学位：">{{ Resume.degree }}</el-descriptions-item>
              <el-descriptions-item label="学校：">{{ Resume.school }}</el-descriptions-item>
              <el-descriptions-item label="专业：">{{ Resume.specialized }}</el-descriptions-item>
              <el-descriptions-item label="求职意向：">{{ Resume.intention }}</el-descriptions-item>
              <el-descriptions-item label="技能：">{{ Resume.skills }}</el-descriptions-item>
              <el-descriptions-item label="项目经验：">{{ Resume.projects }}</el-descriptions-item>
              <el-descriptions-item label="联系电话：">{{ Resume.phone }}</el-descriptions-item>
            </el-descriptions>
          </div>
        </el-card>

      </div>
    </div>
  </section>
  <!-- End Candidates Job Information Area -->

  <!-- Start Subscribe Area -->
  <section class="subscribe-area subscribe-area-about-page">
    <div class="container">
      <div class="subscribe-bg">
        <div class="row align-items-center">
          <div class="col-lg-6">
            <div class="subscribe-content">
              <h2>Find Your Next Great Job Opportunity!</h2>
            </div>
          </div>

          <div class="col-lg-6">
            <form class="newsletter-form" data-toggle="validator">
              <input type="email" class="form-control" placeholder="Enter email address" name="EMAIL" required autocomplete="off">

              <button class="default-btn" type="submit">
                <span>Subscribe</span>
              </button>

              <div id="validator-newsletter" class="form-result"></div>
              <p>Join The Newsletter 10,000 Users Already!</p>
            </form>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!-- End Subscribe Area -->

  <!-- Start Footer Area -->
  <footer class="footer-area pt-100 pb-70">
    <div class="container">
      <div class="row">
        <div class="col-lg-3 col-md-6">
          <div class="single-footer-widget single-bg">
            <a href="index.html" class="logo">
              <img src="@/assets/images/logo.png" alt="Image">
            </a>

            <p>Lorem ipsum dolor sit amet, consec tetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua consec tetur.</p>

            <ul class="social-icon">
              <li>
                <a href="#">
                  <i class="bx bxl-facebook"></i>
                </a>
              </li>
              <li>
                <a href="#">
                  <i class="bx bxl-instagram"></i>
                </a>
              </li>
              <li>
                <a href="#">
                  <i class="bx bxl-linkedin-square"></i>
                </a>
              </li>
              <li>
                <a href="#">
                  <i class="bx bxl-twitter"></i>
                </a>
              </li>
            </ul>
          </div>
        </div>

        <div class="col-lg-3 col-md-6">
          <div class="single-footer-widget">
            <h3>Contact</h3>

            <ul class="address">
              <li>
                <i class="bx bx-phone-call"></i>
                <span>Phone:</span>
                <a href="tel:+1-(514)-7939-357">+1 (514) 7939-357</a>
              </li>
              <li>
                <i class="bx bx-envelope"></i>
                <span>Email:</span>
                <a href="mailto:hello@jubi.com">hello@jubi.com</a>
              </li>
              <li class="location">
                <i class="bx bx-location-plus"></i>
                <span>Address:</span>
                6890 Blvd, The Bronx, NY 1058 New York, USA
              </li>
            </ul>
          </div>
        </div>

        <div class="col-lg-3 col-md-6">
          <div class="single-footer-widget">
            <h3>Helpful Resources</h3>

            <ul class="import-link">
              <li>
                <a href="#">Create Account</a>
              </li>
              <li>
                <a href="#">Contact Us</a>
              </li>
              <li>
                <a href="#">Site Map</a>
              </li>
              <li>
                <a href="#">Terms of Use</a>
              </li>
              <li>
                <a href="#">Privacy Centre</a>
              </li>
              <li>
                <a href="#">Blog</a>
              </li>
            </ul>
          </div>
        </div>

        <div class="col-lg-3 col-md-6">
          <div class="single-footer-widget">
            <h3>Job Seekers</h3>

            <ul class="import-link">
              <li>
                <a href="#">Create Account</a>
              </li>
              <li>
                <a href="#">Browse Jobs</a>
              </li>
              <li>
                <a href="#">Upload CV</a>
              </li>
              <li>
                <a href="#">Company Profile</a>
              </li>
              <li>
                <a href="#">International Jobs</a>
              </li>
              <li>
                <a href="#">FAQ</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </footer>
  <!-- End Footer Area -->

  <!-- Start Copy Right Area -->
  <div class="copy-right-area">
    <div class="container">
      <p>Copyright &copy; 2021.Company name All rights reserved.<a target="_blank" href="https://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></p>
    </div>
  </div>
  <!-- End Copy Right Area -->

  <!-- Start Go Top Area -->
  <div class="go-top">
    <i class="bx bx-chevrons-up"></i>
    <i class="bx bx-chevrons-up"></i>
  </div>
  <!-- End Go Top Area -->
</template>

<style scoped>
@import "@/assets/css/bootstrap.min.css";
@import "@/assets/css/owl.theme.default.min.css";
@import "@/assets/css/owl.carousel.min.css";
@import "@/assets/css/animate.min.css";
@import "@/assets/css/boxicons.min.css";
@import "@/assets/css/magnific-popup.min.css";
@import "@/assets/css/flaticon.css";
@import "@/assets/css/meanmenu.min.css";
@import "@/assets/css/nice-select.min.css";
@import "@/assets/css/odometer.min.css";
@import "@/assets/css/date-picker.min.css";
@import "@/assets/css/muli-fonts.css";
@import "@/assets/css/style2.css";
@import "@/assets/css/responsive2.css";

.error-text {
  color: red;
  margin-top: 5px;
}
</style>